<div class="mx-auto mb-6 text-stone-300 w-full pb-2 py-2 px-4 sm:py-10  bg-custom-dark-black fixed">
  <div class="w-full flex justify-center items-center sm:hidden pb-2">
    <a class="mx-4 hover:text-white " title="Freya Home Page" href="/">
      <img src="/logo.svg" width="40" class="inline-block " />
      <img src="/freya.svg" width="50" class="ml-4 inline-block " />
    </a>
  </div>
  <div class="flex items-center h-[35px] sm:h-[40px] justify-center sm:justify-normal">
    <a
      class="mx-4 hover:text-white static top-0 hidden sm:inline-block "
      title="Freya Home Page"
      href="/"
    >
      <img src="/logo.svg" width="40" class="inline-block " />
      <img src="/freya.svg" width="50" class="ml-4 inline-block " />
    </a>
    <a
      class="inline-block mx-4 hover:text-white hover:underline"
      title="Freya Blog"
      href="/blog"
    >
      Blog
    </a>
    <a
      class="inline-block mx-4 hover:text-white hover:underline"
      title="Freya Docs"
      href="https://docs.rs/freya/latest/freya/"
    >
      Docs
    </a>
    <a
      class="inline-block mx-4 hover:text-white hover:underline"
      title="Freya Discord"
      href="https://discord.gg/sYejxCdewG"
    >
      Discord
    </a>
  </div>
</div>